<template>
<div>
    <div class="app">
        <div class="header">
            <div class="title">应用中心</div>
        </div>
        <div class="app-main">
            <div class="left">
                <div class="app-sidebar" v-if="state.menu_loading">
                    <a-skeleton active :paragraph="{ rows: 3 }" v-for="item in 8" :key="item"/>
                </div>
                <div class="app-sidebar" v-else>
                    <div class="menu-item" :class="{'active': item.active}" v-for="item in state.menu_list" :key="item.id" @click="menu_click(item)">
                        <span>{{item.name}}</span>
                    </div>
                </div>
            </div>
            <div class="app-box" v-if="state.loading">
                <el-row>
                    <el-col :md="6" :xs="24" v-for="item in 14" :key="item">
                        <div class="app-item">
                            <a-skeleton avatar active :paragraph="{ rows: 2 }" />
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="app-box" v-else>
                <el-row>
                    <el-col :md="6" :xs="24" v-for="item in state.data" :key="item.id">
                        <div class="app-item" @click="installed(item)">
                            <div class="app-name">
                                <img :src="fullUrl(item.cover)" :alt="item.name">
                                <div class="info">
                                    <div class="title">{{item.name}}</div>
                                    <div class="desc">{{item.description}}</div>
                                </div>
                                <div class="installed" :class="{active: item.is_download === 1}">
                                    <Icon name="iconfont icon-yunxiazai" size="24" />
                                </div>
                            </div>
                            <div class="app-desc">
                                <span class="desc"># {{item.tags}}</span>
                                <div class="download">
                                    <el-icon><el-icon-Download /></el-icon>
                                    <span>{{item.download}}</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</div>
</template>

<script setup lang="ts">
import {get_category, get_app, install_app} from '/@/api/frontend/chat/app'
import {reactive, ref, onMounted, inject} from 'vue'
import {fullUrl} from "/@/utils/common"
import { useUserInfo } from '/@/stores/userInfo'
import { useRouter } from 'vue-router'

const router = useRouter()

const userInfo = useUserInfo()

const state: {
    loading: boolean,
    menu_loading: boolean,
    login_show: boolean,
    data: any,
    menu_list: any,
    params: object,
} = reactive({
    loading: false,
    menu_loading: false,
    login_show: inject('login_show', ref(false)),
    data: [],
    menu_list: [
        {id: 0, name:'全部分类', active: true}
    ],
    params: {
        page: 1,
        limit: 50,
        category_id: 0,
    },
})

// 监听加载页面
onMounted(() => {
    // 获取分类
    state.menu_loading = true
    get_category({
        page: 1,
        limit: 20,
    }).then((res: any) => {
        state.menu_loading = false
        if (res.code === 1) {
            state.menu_list = state.menu_list.concat(res.data.data)
            get_app_list(state.params)
        }
    })
})

// 获取应用
const get_app_list = (params: any) => {
    state.loading = true
    get_app(params).then((res: any) => {
        if (res.code === 1) {
            state.data = res.data.data
        }
        state.loading = false
    })
}

const menu_click = (item: any) => {
    state.menu_list.forEach((v: any) => {
        v.active = false
    })
    item.active = true
    state.params.category_id = item.id
    get_app_list(state.params)
}

// 安装应用
const installed = (item: any) => {
    // 判断是否登录
    if (!userInfo.isLogin()) {
        state.login_show = !state.login_show
        return false
    }

    if (item.is_download === 1) {
        // 卸载应用
        install_app({
            id: item.id,
            type: 'uninstall',
        }).then((res: any) => {
            if (res.code === 1) {
                item.is_download = 0
            }
        })
        return false
    }
    // 安装应用
    install_app({
        id: item.id,
    }).then((res: any) => {
        if (res.code === 1) {
            item.is_download = 1
            item.download = item.download + 1
            // 跳转聊天
            router.push({ name: 'chat', query: { id: item.id } })
        }
    })
}
</script>

<style scoped lang="scss">
.app {
    .header {
        display: flex;
        align-items: center;
        padding: 0 16px;
        height: 56px;
        background-color: var(--bg-color);
        border-bottom: 1px solid var(--ct-border-color);
        .title {
            font-size: 16px;
            font-weight: 500;
            color: var(--el-text-color-primary);
        }
    }
    .app-main {
        display: flex;
        height: calc(100vh - 56px);
        .left {
            padding: 16px;
            width: 230px;
            border-right: 1px solid var(--ct-border-color);
            .app-sidebar {
                .menu-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 45px;
                    padding: 0 16px;
                    margin-bottom: 8px;
                    border-radius: 4px;
                    border: 1px solid var(--ct-border-color);
                    cursor: pointer;
                    transition: all .3s;
                    background-color: var(--bg-color);
                    &:first-child {
                        height: 40px;
                    }
                    &.active {
                        font-weight: 700;
                        background-color: #5a91fc;
                        color: var(--bg-color);
                        &:hover {
                            background-color: #5a91fc;
                        }
                    }
                    &:hover {
                        background-color: #f5f5f5;
                    }
                }
            }
        }
        .app-box {
            flex: 1;
            overflow: auto;
            padding: 10px;
            background-color: var(--bg-color);
            .app-item {
                padding: 15px;
                border-radius: 4px;
                background-color: var(--bg-color);
                box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
                margin: 10px;
                cursor: pointer;
                transition: all .3s;
                &:hover {
                    transform: scale(1.02);
                    box-shadow: 0 4px 12px 0 rgba(0,0,0,.2);
                }
                .app-name {
                    display: flex;
                    img {
                        width: 42px;
                        height: 42px;
                        border-radius: 50%;
                        margin-right: 8px;
                    }
                    .info {
                        flex: 1;
                        .title {
                            font-size: 15px;
                        }
                        .desc {
                            font-size: 13px;
                            color: var(--el-text-color-secondary);
                        }
                    }
                    .installed {
                        width: 30px;
                        height: 30px;
                        color: #666;
                        &.active {
                            color: #209d44;
                        }
                    }
                }
                .app-desc {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 15px;
                    font-size: 12.9px;
                    color: #6c757d;
                    .download {
                        display: flex;
                        align-items: center;
                        span {
                            margin-top: 2px;
                            margin-left: 3px;
                        }
                    }
                }
            }
        }
    }
}
// 手机版
@media screen and (max-width: 768px) {
    .app {
        //max-width: 400px;
        .app-main {
            flex-direction: column;
            .left {
                display: none;
                //width: 100%;
                //border-right: none;
                //overflow: auto;
                .app-sidebar {
                    //width: 100%;
                    //display: flex;
                    //.item {
                    //    display: flex;
                    //    width: 500px;
                    //    margin-bottom: 0;
                    //}
                }
            }
            .app-box {
                //width: 100%;
                //padding: 0;
                //.app-item {
                //    width: 100%;
                //    margin: 0;
                //    .app-icon {
                //        width: 30px;
                //        height: 30px;
                //        margin-bottom: 5px;
                //    }
                //    .app-name {
                //        font-size: 12px;
                //    }
                //}
            }
        }
    }
}
html {
    &.dark {
        .menu-item {
            &.active {
                color: #fff !important;
            }
            &:hover {
                background-color: #5a91fc !important;
            }
        }
    }
}
</style>
